<template>
    <div>
        <!-- 视频区 -->
        <video ref="videoRef" @loadedmetadata="videoLoad" controls width="80%" :src="mvUrl"></video>
        <!-- mv详情 -->
        <div>
            <!-- 歌手 -->
            <div class="flex py-5">
                <div class="flex items-center mr-5" v-for="item in mvInfo.artists" :key="item.id">
                    <img class="rounded-full object-cover w-14 h-14 mr-3" :src="item.img1v1Url" alt="">
                    <span class="text-gray-500 cursor-pointer hover:text-black"
                        @click="router.push({ name: 'singerInfo', query: { id: item.id } })">{{ item.name }}</span>
                </div>
            </div>
            <!-- mv标题 -->
            <div class="flex items-center">
                <h1 class="text-2xl font-bold">{{ mvInfo.name }}</h1>
                <div v-if="mvInfo.desc">
                    <p class="pt-1 ml-2 select-none" @click="showAbout = false" v-if="showAbout">&#9660</p>
                    <p class="pt-1 ml-2 select-none" @click="showAbout = true" v-else>&#9650</p>
                </div>

            </div>
            <!-- 发布日期 -->
            <div class="text-gray-500 text-sm flex py-4">
                <p>发布日期: {{ mvInfo.publishTime }}</p>
                <p class="ml-5">播放: {{ setVNumber(mvInfo.playCount) }} 次</p>
            </div>
            <!-- 标签 -->
            <div class="flex items-center text-sm py-1">
                <div v-for="item in mvInfo.videoGroup" :key="item.id" class="bg-gray-200 px-2 py-1 mr-2 rounded-xl">
                    {{ item.name }}</div>
            </div>
            <!-- mv简介 -->
            <div v-if="showAbout" class="py-3">
                <p>{{ mvInfo.desc }}</p>
            </div>
            <!-- 操作 -->
            <div class="flex items-center py-3 select-none">
                <div
                    class="border border-gray-300 px-3 py-1 mr-3 rounded-full cursor-pointer hover:bg-gray-200 transition-all">
                    <i class="iconfont icon-good"></i>
                    <span class="ml-1 text-sm">赞({{ mvCount.likedCount }})</span>
                </div>
                <div
                    class="border border-gray-300 px-3 py-1 mr-3 rounded-full cursor-pointer hover:bg-gray-200 transition-all">
                    <i class="iconfont icon-zhuanfa"></i>
                    <span class="ml-1 text-sm">分享({{ mvCount.shareCount }})</span>
                </div>
                <div @click="downloadMv"
                    class="border border-gray-300 px-3 py-1 mr-3 rounded-full cursor-pointer hover:bg-gray-200 transition-all">
                    <i class="iconfont icon-xiazai"></i>
                    <span class="ml-1 text-sm">下载MV</span>
                </div>
                <div>
                    <el-popover placement="right" title="请选择举报原因：" :width="200" trigger="click">
                        <template #reference>
                            <span class="border-b border-gray-500 text-sm ml-5 cursor-pointer">举报</span>
                        </template>
                        <ul @click="ElMessage.success('举报成功')">
                            <li class="py-2 cursor-pointer border-t">
                                <p>广告或营销信息</p>
                            </li>
                            <li class="py-2 cursor-pointer">
                                <p>恶意人身攻击</p>
                            </li>
                            <li class="py-2 cursor-pointer">
                                <p>色情、低俗或有害内容</p>
                            </li>
                            <li class="pt-2 cursor-pointer">
                                <p>政治敏感言论</p>
                            </li>
                        </ul>
                    </el-popover>

                </div>
            </div>
            <!-- 评论标题 -->
            <div class="flex items-center py-2">
                <h1 class="py-3 text-2xl font-bold mr-1">评论</h1>
                <span class="pt-1 text-[13px] text-gray-500">({{ mvInfo.commentCount }})</span>
            </div>
            <!-- 评论列表 -->
            <Comment :commentList="mvCommentList" :showBrilliant="showBrilliant"></Comment>
            <!-- 分页器 -->
            <div class="flex justify-center pb-5">
                <el-pagination :default-page-size="20" v-model:page-size="pageSize" @change="handleSizeChange"
                    background layout="prev, pager, next" :total="total" />
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { setVNumber } from "@renderer/hooks"
import { useRoute, useRouter } from 'vue-router'
import type { mvType, mvInfoTyoe, mvCountType, MvCommentType } from '@renderer/view/home/findMusic/type'
import { ElMessage } from 'element-plus';
const { ipcRenderer } = require('electron')
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const route = useRoute()
const router = useRouter()
const showAbout = ref(true)
const showBrilliant = ref(true)
const total = ref(50)
const mvUrl = ref("")
const videoRef = ref({} as HTMLVideoElement)
const mvCount = ref({} as mvCountType)
const mvInfo = ref({} as mvInfoTyoe)
const mvCommentList = ref({} as MvCommentType)
const scrollValue = ref<string | number>(0)
const pageSize = ref(20)
onMounted(() => {
    document.querySelector('#main')?.scrollTo(0, 0)
    getMvUrl(route.query.id as string | number)
    getMvInfo(route.query.id as string | number)
    getMvCount(route.query.id as string | number)
    getMvComment(route.query.id as string | number, 0)
    scrollValue.value = route.query.scrollValue as number | string
})
onUnmounted(() => {
    document.querySelector('#main')?.scrollTo(0, scrollValue.value as number)
})
// 获取mv播放地址
const getMvUrl = async (id: number | string) => {
    await ipcRenderer.invoke('getMvUrl', id).then((res: mvType) => {
        videoRef.value.load()
        mvUrl.value = res.url
    })
}
// 获取mv信息
const getMvInfo = async (mvid: number | string) => {
    await ipcRenderer.invoke('getMvInfo', mvid).then((res: mvInfoTyoe) => {
        mvInfo.value = res
        total.value = res.commentCount
    })
}
// 获取mv点赞转发评论数数据
const getMvCount = async (mvid: number | string) => {
    await ipcRenderer.invoke('getMvDetail', mvid).then((res: mvCountType) => {
        mvCount.value = res
    })
}
// 获取mv评论
const getMvComment = async (id: number | string, offset: number) => {
    await ipcRenderer.invoke('getMvComment', id, offset).then((res: MvCommentType) => {
        mvCommentList.value = res
        if ((res.hotComments && res.hotComments.length == 0) || res.hasOwnProperty('hotComments') == false) {
            showBrilliant.value = false
        } else {
            showBrilliant.value = true
        }

    })
}
// page-size 改变时触发
const handleSizeChange = (currentPage: number) => {
    getMvComment(route.query.id as string | number, currentPage - 1)
    document.querySelector('#main')?.scrollTo(0, 950)
}
// video 加载完成
const videoLoad = () => {
    videoRef.value.play()
    bus.emit('videoLoad')
}
// 下载MV
const downloadMv = () => {
    ipcRenderer.send('donload', mvUrl.value)
}
</script>
<style scoped lang='less'>
:deep(.el-pager li) {
    border-radius: 50px;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--playBg);
}

:deep(.el-pager li:hover) {
    color: var(--playBg);
    background: var(--inputBg);
}

:deep(.el-pagination button:hover) {
    color: var(--playBg);
}
</style>